

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>调用摄像头拍照</title>
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script>
			// 是否是手机
			function isMobile() {
				let userAgentInfo = navigator.userAgent;
				let mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
				let mobile_flag = false;
				//根据userAgent判断是否是手机
				for (let v = 0; v < mobileAgents.length; v++) {
					if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
						mobile_flag = true;
						break;
					}
				}
				let screen_width = window.screen.width;
				let screen_height = window.screen.height;
				//根据屏幕分辨率判断是否是手机
				if (screen_width > 325 && screen_height < 750) {
					mobile_flag = true;
				}
				return mobile_flag;
			}
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#capture {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				line-height: 50px;
				text-align: center;
			}

			canvas {
				width: 50%;
				height: 50%;
				display: none;
			}

			video {
				width: 45%;
				height: 45%;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="720" height="540"></canvas>
		<video id="video"></video>
		<br /><button id="capture">拍照</button>

		<script type="text/javascript">
			let flag = false;
			const video = document.getElementById('video');
			const capture = document.getElementById('capture');
			const canvas = document.getElementById('canvas');
			const context = canvas.getContext('2d');
			const screen_W = window.innerWidth || document.body.clientWidth;
			const screen_H = window.innerHeight || document.body.clientHeight;
			canvas.width = screen_W * 3;
			canvas.height = screen_H * 3 + 12;
			if (isMobile()) {
				$(canvas).css({"width": "95%"});
				canvas.width = screen_W * 2.5;
				canvas.height = screen_W * 3 + 12;
				alert("phone");
			}
			if (navigator.mediaDevices === undefined) {
				navigator.mediaDevices = {};
			}
			if (navigator.mediaDevices.getUserMedia === undefined) {
				navigator.mediaDevices.getUserMedia = function(constraints) {
					vargetUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
					if (!getUserMedia) {
						returnPromise.reject(newError('getUserMedia is not implemented in this browser'));
					}
					return newPromise(function(resolve, reject) {
						getUserMedia.call(navigator, constraints, resolve, reject);
					});
				}
			}
			//默认使用前摄像头，强制使用后置摄像头如下设置
			//let constraints = {video: { facingMode: { exact: "environment" } }};
			let constraints = {video: true};
			navigator.mediaDevices.getUserMedia(constraints)
				.then(function(stream) {
					if ("srcObject" in video) {
						video.srcObject = stream;
					} else {
						video.src = window.URL.createObjectURL(stream);
					}
					video.onloadedmetadata = function(e) {
						video.play();
					};
				}).catch(function(err) {
					console.log(err.name + ":" + err.message);
				});

			capture.addEventListener('click', function(e) {
				if (!flag) {
					context.drawImage(video, 0, 0, canvas.width, canvas.height);
					$(canvas).show();
					$(video).hide();
					$(capture).text("重新拍照");
					flag = true;
				} else {
					$(video).show();
					$(canvas).hide();
					$(capture).text("拍照");
					flag = false;
				}
			});
		</script>
	</body>
</html>

